<template>
  <div id='news'>
    <div class="banner w-full flex justify-center items-center">
      <h1>新闻动态</h1>
    </div>
    <div class="ready-box w-full bg-white" v-if="!addClass"></div>
    <ul  class="container" :class="addClass ? 'news-gradient' : ''" v-else>
      <li class="w-full bg-white" v-for="item in coverArr" :key="item" @click="viewDetail(item)">
        <img :src="item.src" class="w-full">
        <div>{{ item.title }}</div>
      </li>
    </ul>

  </div>
</template>
<script lang='ts'>
import {cover1,cover2,cover3,cover4} from '@/const/index'
import { useRouter } from 'vue-router'
export default { 
  head() {
    return {
      meta: [{
        hid: 'keywords',
        name: 'keywords',
        content: '熊猫不走、生日蛋糕、熊猫跳舞、水果蛋糕、慕斯蛋糕、奶油蛋糕、芝士蛋糕、动物奶油蛋糕；生日派对、烘焙行业、仪式感'
      }]
    }
  },
   setup() {
    const addClass = ref(false)
    const router = useRouter()
    const coverArr = ref([
      { page: 4, src: cover1, title: '深度专访 | 2300w私域用户、复购率60%，成立仅3年的熊猫不走是怎么做到的？' },
      { page: 1, src: cover2, title: '年营收超8亿，三年布局25城的熊猫不走蛋糕的超强商业本质洞察方法论' },
      { page: 3, src: cover3, title: '售卖的不仅仅是蛋糕，仪式感孕育出的大生意丨品牌仪式感专题' },
      { page: 2, src: cover4, title: '熊猫不走3年卖600万个蛋糕：一年营收8亿，私域占7成！' },
    ])
    const viewDetail = (item) => {
      router.push({
        path: `/news/detail/mediaReport/${item.page}`,
      })
      document.body.scrollTop = document.documentElement.scrollTop = 0
    }
    setTimeout(() => {
      addClass.value = true
    }, 0);
    return {
      coverArr,
      viewDetail,
      addClass
    }
  }
}

</script>

<style lang='scss'>
#news {
  .banner {
    height: 59.32px;
    background: url('/imgs/cakes/banner-bg.png') no-repeat;
    background-size: cover;
    h1 {
      font: 600 20px 'PingFang SC';
      color: #FFFFFF;
    }
  }
  .ready-box {
    height: 100vh;
  }
  .container {
    padding: 32px 9px;
    background-color: #f6f6f6;
    li {
      height: 245px;
      margin-bottom: 20px;
      border-radius: 4px;
      img {
        height: 164px;
        border-radius: 4px 4px;
      }
      div {
        padding: 7px 20px;
        line-height: 33px !important;
        font: 400 14px  'PingFang SC';
      }
    }
  }
  .news-gradient {
    animation: news-opacity 1s linear forwards;
    @keyframes news-opacity {
      0% { opacity: 0;}
      100% { opacity: 1;}
    }
  }
}

</style>